<template>
  <div>
    <div class="announcementQueryTable">
      <el-form :inline="true" :model="queryParam" class="demo-form-inline">
        <el-form-item label="公告标题" :label-position="'right'">
          <el-input v-model="queryParam.title" placeholder="输入标题内容" clearable/>
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input v-model="queryParam.info" placeholder="输入内容" clearable/>
        </el-form-item>
        <el-form-item label="公告类型">
          <el-select
              v-model="queryParam.type"
              clearable
              placeholder="请选择公告类型"
              style="width: 240px"
          >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getAnnouncementList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="dialogVisible=true">发布公告</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div class="announcementTable">
      <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
      >
        <el-table-column prop="title" label="标题" width="240" align="center"/>
        <el-table-column prop="type" label="类型" width="120" align="center">
          <template v-slot="scope">
            <el-tag :type="getTag2Type(scope.row.type)" effect="plain" round>{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120" align="center">
          <template v-slot="scope">
            <el-tag :type="getTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="view" label="阅读量" width="120" align="center"/>
        <el-table-column prop="createTime" label="发布时间" width="280" align="center"/>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button @click="handleView(scope.row)" style="border: none">
              <img src="@/assets/img/view.png" alt="查看" style="width: 20px; height: 20px;"/>
            </el-button>
            <!-- 编辑按钮 -->
            <el-button @click="handleEdit(scope.row)" style="border: none">
              <img src="@/assets/img/edit.png" alt="编辑" style="width: 20px; height: 20px;"/>
            </el-button>
            <!-- 删除按钮 -->
            <el-popconfirm
                title="是否确认删除?"
                @confirm="handleDelete(scope.row)"
                @cancel="handleCancel"
            >
              <template #reference>
                <el-button style="border: none">
                  <img src="@/assets/img/delete.png" alt="删除" style="width: 20px; height: 20px;" />
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="queryParam.pageNum"
          v-model:page-size="queryParam.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :size="'small'"
          :disabled="disabled"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getAnnouncementList"
          @current-change="getAnnouncementList"
      />
    </div>
    <div>
      <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="新增公告" width="700">
        <el-form :model="announcement" label-width="120px">
          <el-form-item label="公告标题">
            <el-input v-model="announcement.title" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="公告内容">
            <el-input
                v-model="announcement.info"
                type="textarea"
                style="width: 80%"
            />
          </el-form-item>
          <el-form-item label="公告类型">
            <el-select
                v-model="announcement.type"
                clearable
                placeholder="请选择公告类型"
                style="width: 300px"
            >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态">
            <el-select
                v-model="announcement.status"
                clearable
                placeholder="请选择公告类型"
                style="width: 300px"
            >
              <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = cancelAddAnnouncement">取消</el-button>
            <el-button type="primary" @click="addAnnouncement()">确定</el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-if="dialogVisible2" v-model="dialogVisible2" title="查看公告" width="700">
        <el-form :model="showInfo" label-width="120px">
          <el-form-item label="公告标题">
            <div>{{ showInfo.title }}</div>
          </el-form-item>
          <el-form-item label="公告内容">
            <div>{{ showInfo.info }}</div>
          </el-form-item>
          <el-form-item label="公告类型">
            <div>{{ showInfo.type }}</div>
          </el-form-item>
          <el-form-item label="发布状态">
            <div>{{ showInfo.status }}</div>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible2=false">关闭</el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-if="dialogVisible3" v-model="dialogVisible3" title="修改公告" width="700">
        <el-form :model="showInfo" label-width="120px">
          <el-form-item label="公告标题">
            <el-input v-model="showInfo.title" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="公告内容">
            <el-input
                v-model="showInfo.info"
                type="textarea"
                style="width: 80%"
            />
          </el-form-item>
          <el-form-item label="公告类型">
            <el-select
                v-model="showInfo.type"
                clearable
                placeholder="请选择公告类型"
                style="width: 300px"
            >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态">
            <el-select
                v-model="showInfo.status"
                clearable
                placeholder="请选择公告类型"
                style="width: 300px"
            >
              <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="editAddAnnouncement(this.showInfo)">确定</el-button>
          </div>
        </template>
      </el-dialog>

    </div>
  </div>
</template>

<script>

import {addAnnouncement, editAnnouncement, getAnnouncementList} from "@/api/admin";
import {parseTime} from "@/utils/timeUtil";
import {ElNotification} from 'element-plus';
import {View} from '@element-plus/icons-vue';

export default {
  name: "AnnouncementManagement",
  data() {
    return {
      showInfo: {},
      dialogVisible3: false,
      dialogVisible2: false,
      dialogVisible: false,
      status: [
        {
          value: 0,
          label: '草稿'
        },
        {
          value: 1,
          label: '已发布'
        },
        {
          value: 2,
          label: '已关闭'
        }
      ],
      options: [
        {
          value: 0,
          label: '系统公告'
        },
        {
          value: 1,
          label: '运营活动'
        },
        {
          value: 2,
          label: '系统更新'
        }
      ],
      total: 0,
      tableRowClassName: '',
      tableData: [{
        title: '公告标题',
        type: '系统公告',
        createTime: '2025年2月23日14:26:41',
        status: '草稿',
        view: 0
      }],
      queryParam: {
        pageSize: 10,
        pageNum: 1,
        title: null,
        info: null,
        type: null,
        status: null,
      },
      announcement: {
        title: null,
        cover: null,
        type: null,
        status: null,
        info: null
      }
    }
  }, methods: {
    editAddAnnouncement(data) {
      data.createTime = null
      switch (data.type) {
        case '系统公告':
          data.type = 0;
          break;
        case '运营活动':
          data.type = 1;
          break;
        default:
          data.type = 2;
      }
      switch (data.status) {
        case '未发布':
          data.status = 0;
          break;
        case '已发布':
          data.status = 1;
          break;
        default:
          data.status = 2;
      }

      editAnnouncement(data).then(res => {
        this.showInfo = {}
        this.dialogVisible3 = false
        if (res.code === 200) {
          this.notification("修改成功", "success")
          this.getAnnouncementList()
        } else {
          this.notification("修改失败", "error")
        }
      })
    },
    handleView(row) {
      this.showInfo = row
      this.dialogVisible2 = true
    },
    handleEdit(row) {
      this.showInfo = row
      this.dialogVisible3 = true

    },
    handleDelete(row) {
      const updateInfo = {
        id: row.id,
        isDelete: 1
      }
      editAnnouncement(updateInfo).then(res => {
        this.showInfo = {}
        this.dialogVisible3 = false
        if (res.code === 200) {
          this.notification("删除成功", "success")
          this.getAnnouncementList()
        } else {
          this.notification("删除失败", "error")
        }
      })
    },
    notification(title, type) {
      {
        ElNotification({
          title: title,
          type: type,
        })
      }
    }, cancelAddAnnouncement() {
      this.announcement = {
        announcement: {
          title: null,
          cover: null,
          type: null,
          status: null,
          info: null
        }
      }
      this.dialogVisible = false
    },
    addAnnouncement() {
      if (this.hasContent(this.announcement)) {
        addAnnouncement(this.announcement).then(res => {
          this.cancelAddAnnouncement()
          this.getAnnouncementList()
        })
      } else {
        this.notification("请填写完整", "error")
      }
    },
    hasContent(announcement) {
      return Object.values(announcement).some(value => value !== null && value !== "");
    },
    getTagType(status) {
      switch (status) {
        case '未发布':
          return "info";
        case '已发布':
          return 'success';
        case '已关闭':
          return 'warning';
      }
    },
    getTag2Type(type) {
      switch (type) {
        case '系统公告':
          return "primary";
        case '运营活动':
          return 'danger';
        case '系统更新':
          return 'warning';
      }
    },
    addAnnouncementList() {

    },
    getAnnouncementList() {
      getAnnouncementList(this.queryParam).then(res => {
        this.total = res.data.totalCount
        res.data.list.forEach(v => {
          v.createTime = parseTime(v.createTime)
          switch (v.type) {
            case 0:
              v.type = '系统公告';
              break;
            case 1:
              v.type = '运营活动';
              break;
            default:
              v.type = '系统更新';
          }
          switch (v.status) {
            case 0:
              v.status = '未发布';
              break;
            case 1:
              v.status = '已发布';
              break;
            default:
              v.status = '已关闭';
          }
        })
        this.tableData = res.data.list
      })
    },
  }, mounted() {
    this.getAnnouncementList()
  }
}
</script>

<style scoped>
.announcementTable, .announcementQueryTable {
  margin-left: 30px;
  margin-right: 30px;
  border: 1px solid #eee;
}

.demo-form-inline {
  padding-left: 30px;
}

.announcementQueryTable, .demo-pagination-block {
  /*text-align: center;*/
  padding-top: 10px;
  margin-top: 40px;
}

.demo-pagination-block {
  padding-left: 25%;
}
</style>